<template>
	<view class="kb">
		<view class="flex-center">
			<view class="kb-input kb-input__ul" @tap="showKeyboard">
				<view :style="textArr.length === 1 ? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{ textBaseArr[0] }}</view>
				<view :style="textArr.length === 2 ? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{ textBaseArr[1] }}</view>
				<view :style="textArr.length === 3 ? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{ textBaseArr[2] }}</view>
				<view :style="textArr.length === 4 ? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{ textBaseArr[3] }}</view>
				<view :style="textArr.length === 5 ? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{ textBaseArr[4] }}</view>
				<view :style="textArr.length === 6 ? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{ textBaseArr[5] }}</view>
				<view :style="textArr.length === 7 ? 'border-color:#24c6dc' : 'border-color:#cccccc'" class="kb-input__li">{{ textBaseArr[6] }}</view>
				<view
					v-if="!isEnergy"
					:style="textArr.length === 8 ? 'border-color:#24c6dc' : 'border-color:#cccccc'"
					class="kb-input__li"
					:class="isEnergy ? 'kb-input__new-energy' : ''"
					@tap="energy(7)"
				>
					{{ textBaseArr[7] }}
				</view>
				<view v-else style="border: none;opacity:0" class="kb-input__li" @tap="energy(7)">{{ textBaseArr[7] }}</view>
			</view>
		</view>

		<view class="kb-keyboard">
			<view class="kb-keyboard__over row-wrap" v-show="show" @tap="closeKeyboard"></view>
			<view class="kb-keyboard__panle row-wrap kb-keyboard__panle-style" v-show="show">
				<!--省份简写键盘-->
				<view
					v-show="!isAlph"
					v-for="proItem in province"
					:key="proItem"
					@tap="tapKeyboard"
					:data-val="proItem"
					class="kb-keyboard__td kb-keyboard__td-theme"
					hover-class="kb-keyboard__td-tap-theme"
					:hover-start-time="0"
					:hover-stay-time="40"
				>
					{{ proItem }}
				</view>

				<!--数字键盘-->
				<button
					v-show="isAlph"
					v-for="numItem in natural"
					:key="numItem"
					@tap="tapKeyboard"
					:data-val="numItem"
					class="kb-keyboard__td-num kb-keyboard__td-theme"
					hover-class="kb-keyboard__td-tap-theme"
					:hover-start-time="0"
					:hover-stay-time="40"
					:disabled="!isNum"
				>
					{{ numItem }}
				</button>

				<!--字母键盘-->
				<view
					v-show="isAlph"
					v-for="alItem in 'QWERTYUOP港ASDFGHJKL澳ZXCVBNM'"
					:key="alItem"
					@tap="tapKeyboard"
					:data-val="alItem"
					class="kb-keyboard__td-num kb-keyboard__td-theme"
					hover-class="kb-keyboard__td-tap-theme"
					:hover-start-time="0"
					:hover-stay-time="40"
				>
					<text v-if="alItem === '-'" class="kb-keyboard__del"></text>
					<text v-else>{{ alItem }}</text>
				</view>

				<view
					v-show="isAlph"
					style="width: 60px;"
					class="kb-keyboard__td-num kb-keyboard__td-theme"
					@tap="deletboard"
					hover-class="kb-keyboard__td-tap-fin-theme"
					:hover-start-time="0"
					:hover-stay-time="60"
				>
					<text class="kb-keyboard__del"></text>
				</view>

				<!-- 完成按钮 -->
				<!-- <view v-if="isAlph && textArr.length > 6" @tap="tapFinished" class="kb-keyboard__td-finished kb-keyboard__finished" hover-class="kb-keyboard__td-tap-fin-theme" :hover-start-time="0" :hover-stay-time="60">{{extraKey}}</view>
                <view v-if="isAlph && textArr.length < 7" class="kb-keyboard__td-finished kb-keyboard__finished-base">{{extraKey}}</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		province: {
			type: String,
			default: '京津沪冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤川青藏琼宁渝'
		},
		natural: {
			type: String,
			default: '1234567890'
		},
		baseBorder: {
			type: String,
			default: '#cccccc'
		},
		activeBorder: {
			type: String,
			default: '#ff7149'
		},
		extraKey: {
			type: String,
			default: '完成'
		},
		plateNum: {
			type: String,
			default: ''
		},
		isEnergy: {
			type: Boolean,
			default: false
		},
		textArray: {
			type: String,
			default: ''
		}
		// textArray: {
		// 	type: Array,
		// 	default: () => {
		// 		return [];
		// 	}
		// }
	},
	watch: {
		textArray: {
			immediate: true,
			handler: function(newV) {
				// console.log('=============', newV);
				// this.textArray = newV.split('');
				this.textArr = newV.split('');
				this.textBaseArr = newV.split('');
				if (this.isEnergy) {
					// if (this.textArr.length === 7) {
					// 	let textValue = this.textArr.join('');
					// 	this.$emit('keyboard', textValue);
					// }
					if (this.textBaseArr.length == 8) {
						this.textBaseArr = this.textBaseArr.slice(0, -1);
					}
				} else {
					// if (this.textArr.length === 8) {
					// 	let textValue = this.textArr.join('');
					// 	this.$emit('keyboard', textValue);
					// }
					if (this.textBaseArr.length > 0) {
						this.textBaseArr.push('');
					}
				}

				if (this.textArr.length === 1) {
					this.isAlph = true;
					this.isNum = false;
				} else if (this.textArr.length === 0) {
					this.isAlph = false;
					this.isNum = false;
				} else {
					this.isAlph = true;
					this.isNum = true;
				}

				let textValue = this.textArr.join('');
				this.$emit('keyboard', textValue);
			}
		},
		isEnergy: {
			immediate: true,
			handler: function(newV) {
				this.isEnergy = newV;
				if (this.isEnergy == true) {
					if (this.textBaseArr.length > 0) {
						// this.textArr = this.textArr.slice(0, -1);
						this.textBaseArr = this.textBaseArr.slice(0, -1);
					} else {
						this.textBaseArr = ['', '', '', '', '', '', ''];
					}
				} else {
					if (this.textBaseArr.length > 0) {
						this.textBaseArr.push('');
					} else {
						this.textBaseArr = ['', '', '', '', '', '', '', ''];
					}
				}
				let textValue = this.textArr.join('');
				this.$emit('keyboard', textValue);
			}
		}
	},
	data() {
		return {
			isNum: false,
			isAlph: false,
			// isEnergy: true,
			textBaseArr: ['', '', '', '', '', '', '', ''],
			textArr: [],
			tapVal: ''
		};
	},
	computed: {},
	created() {
		if (this.textArr.length > 0) {
			this.textBaseArr = this.textArr;
		}
		if (this.textArr.length === 1) {
			this.isAlph = true;
			this.isNum = false;
		} else if (this.textArr.length === 0) {
			this.isAlph = false;
			this.isNum = false;
		} else {
			this.isAlph = true;
			this.isNum = true;
		}
	},
	methods: {
		showKeyboard() {
			this.$emit('update:show', true);
		},
		closeKeyboard() {
			this.$emit('update:show', false);
		},
		deletboard() {
			let e = {
				currentTarget: {
					dataset: {
						val: '-'
					}
				}
			};
			this.tapKeyboard(e);
		},
		tapKeyboard(e) {
			this.tapVal = e.currentTarget.dataset.val;

			if (this.tapVal === '-') {
				this.textArr = this.textArr.slice(0, -1);
				// this.textArr.pop();
				this.textBaseArr.splice(this.textArr.length, 1, '');
				if (this.textArr.length === 7 && !this.isEnergy && this.tapVal !== '') {
					// this.isEnergy = true;
					this.tapVal = '';
				}
			} else {
				if (this.textArr.length > 7) return false;
				if (this.textArr.length > 6 && this.isEnergy) {
					// this.textBaseArr.splice(6, 1, this.tapVal);
					// this.textArr.splice(6, 1, this.tapVal);
					return false;
				}
				this.textArr = [...this.textArr, this.tapVal];
				this.textBaseArr.splice(this.textArr.length - 1, 1, this.tapVal);
				this.$emit('update:plateNum', this.textArr.join(''));
			}

			if (this.textArr.length === 1) {
				this.isAlph = true;
				this.isNum = false;
			} else if (this.textArr.length === 0) {
				this.isAlph = false;
				this.isNum = false;
			} else {
				this.isNum = true;
			}
			this.$emit('update:plateNum', this.textArr.join(''));

			let textValue = this.textArr.join('');
			this.$emit('keyboard', textValue);

			// if (this.isEnergy) {
			// 	if (this.textArr.length === 7) {
			// 		let textValue = this.textArr.join('');
			// 		this.$emit('keyboard', textValue);
			// 	}
			// } else {
			// 	if (this.textArr.length === 8) {
			// 		let textValue = this.textArr.join('');
			// 		this.$emit('keyboard', textValue);
			// 	}
			// }
		},
		tapFinished(e) {
			let textValue = this.textArr.join('');
			this.$emit('keyboard', textValue);
		},
		energy(index) {
			// if (index === 7 && this.isEnergy && this.textArr.length === 7) {
			//     this.isEnergy = false;
			// }
		}
	},
	mounted() {}
};
</script>
<style>
.kb {
	width: 100%;
	height: 100%;
}
.kb-input {
	width: 100%;
	height: 60px;
	font-size: 18px;
	/* position: relative; */
	top: 50px;
}
.kb-input__ul {
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
	-webkit-justify-content: space-around;
	width: 92%;
	height: 60px;
	z-index: 999;
}
.kb-input__li {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	width: 34px;
	height: 50px;
	border: 2px solid #cccccc;
	border-radius: 4px;
	background-color: #ffffff;
}
.kb-input__active {
	border: 1px solid #24c6dc;
}
.kb-input__new-energy {
	width: 36px;
	height: 50px;
	background: url();
	background-size: 100% 100%;
	border: none;
	border-radius: 5px;
}

.kb-keyboard {
	width: 100vw;
	background-color: #ffffff;
}

.kb-keyboard__over {
	z-index: 888;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.kb-keyboard__panle {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	z-index: 999;
}
.kb-keyboard__panle-style {
	border-bottom: 8px solid #eaf1f9;
	border-top: 10px solid #eaf1f9;

	--from: #eaf1f9;
	--to: #eaf1f9;

	background: linear-gradient(130deg, var(--from), var(--to));
	background: -webkit-linear-gradient(130deg, var(--from), var(--to));
}
.kb-keyboard__td {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	width: calc((100vw - 4px) / 9);
	font-size: 18px;
	height: 48px;
	margin: 2px;
	border-radius: 5px;
}
.kb-keyboard__td-num {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	width: calc((100vw - 4px) / 12);
	font-size: 18px;
	height: 48px;
	margin: 2px;
	border-radius: 5px;
}
.kb-keyboard__td-finished {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	width: 110px;
	height: 48px;
	margin-top: 2px;
	margin-left: 10px;
	font-size: 18px;
	border-radius: 5px;
}
.kb-keyboard__del {
	width: calc((100vw - 4px) / 6);
	/* width: 100%; */
	height: 100%;
	background: url();
	background-size: 100% 100%;
}
.kb-keyboard__finished {
	border: 1px solid #2f62ed;
	background-color: #2f62ed;
	color: #ffffff;
}
.kb-keyboard__finished-base {
	border: 1px solid #cdd0d5;
	background-color: #cdd0d5;
	color: #1e1e1e;
}
.kb-keyboard__td-theme {
	border: 1px solid #cdd0d5;
	color: #1e1e1e;
	box-shadow: 3px 3px 1px #cdd0d5;
	-webkit-box-shadow: 3px 3px 1px #cdd0d5;
	background: #fff;
}
.kb-keyboard__td-tap-theme {
	border: 1px solid #cdd0d5;
	color: #1e1e1e;
	--from: #e5e2e2;
	--to: #e5e5e5;

	background: linear-gradient(130deg, var(--from), var(--to));
	background: -webkit-linear-gradient(130deg, var(--from), var(--to));
}
.kb-keyboard__td-tap-fin-theme {
	border: 1px solid #cdd0d5;
	color: #fff;
	--from: #cdd0d5;
	--to: #b8b8b9;

	background: linear-gradient(130deg, var(--from), var(--to));
	background: -webkit-linear-gradient(130deg, var(--from), var(--to));
}

.flex-center {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}

.row-wrap {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}
</style>
